<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/blog/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/blog/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/blog/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/blog/images/logo.svg" color="#222">

<link rel="stylesheet" href="/blog/css/main.css">


<link rel="stylesheet" href="/blog/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"dttx123.gitee.io","root":"/blog/","scheme":"Gemini","version":"8.0.0-rc.2","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="函数定义函数的三种方式函数声明1234fn();&#x2F;&#x2F;函数声明可以先调用，在声明function fn()&amp;#123;  console.log(&quot;这是函数声明&quot;)&amp;#125;  函数表达式1234var fn &#x3D; function() &amp;#123;  console.log(&quot;这是函数表达式&quot;);  &amp;#125;fn();&#x2F;&#x2F;函数表达式必须先声明，再调用">
<meta property="og:type" content="article">
<meta property="og:title" content="函数基础">
<meta property="og:url" content="http://dttx123.gitee.io/2017/04/03/javaScript/%E5%87%BD%E6%95%B0/index.html">
<meta property="og:site_name" content="Starry Night">
<meta property="og:description" content="函数定义函数的三种方式函数声明1234fn();&#x2F;&#x2F;函数声明可以先调用，在声明function fn()&amp;#123;  console.log(&quot;这是函数声明&quot;)&amp;#125;  函数表达式1234var fn &#x3D; function() &amp;#123;  console.log(&quot;这是函数表达式&quot;);  &amp;#125;fn();&#x2F;&#x2F;函数表达式必须先声明，再调用">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2017/04/03/javaScript/%E5%87%BD%E6%95%B0/function.jpg">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2017/04/03/javaScript/%E5%87%BD%E6%95%B0/full.png">
<meta property="article:published_time" content="2017-04-02T16:00:00.000Z">
<meta property="article:modified_time" content="2020-05-12T16:26:02.664Z">
<meta property="article:author" content="大春哥">
<meta property="article:tag" content="js核心">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://dttx123.gitee.io/blog/2017/04/03/javaScript/%E5%87%BD%E6%95%B0/function.jpg">

<link rel="canonical" href="http://dttx123.gitee.io/2017/04/03/javaScript/%E5%87%BD%E6%95%B0/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>函数基础 | Starry Night</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
        <span class="toggle-line toggle-line-first"></span>
        <span class="toggle-line toggle-line-middle"></span>
        <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/blog/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">Starry Night</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">这就朕为你打下的江山</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/blog/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/blog/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/blog/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/blog/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/blog/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://dttx123.gitee.io/2017/04/03/javaScript/%E5%87%BD%E6%95%B0/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/blog/images/avatar.jpg">
      <meta itemprop="name" content="大春哥">
      <meta itemprop="description" content="IT">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Starry Night">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          函数基础
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2017-04-03 00:00:00" itemprop="dateCreated datePublished" datetime="2017-04-03T00:00:00+08:00">2017-04-03</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-05-13 00:26:02" itemprop="dateModified" datetime="2020-05-13T00:26:02+08:00">2020-05-13</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/js%E5%9F%BA%E7%A1%80/" itemprop="url" rel="index"><span itemprop="name">js基础</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h1><h2 id="定义函数的三种方式"><a href="#定义函数的三种方式" class="headerlink" title="定义函数的三种方式"></a>定义函数的三种方式</h2><h3 id="函数声明"><a href="#函数声明" class="headerlink" title="函数声明"></a>函数声明</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">fn();<span class="comment">//函数声明可以先调用，在声明</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"这是函数声明"</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="函数表达式"><a href="#函数表达式" class="headerlink" title="函数表达式"></a>函数表达式</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> fn = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"这是函数表达式"</span>);  </span><br><span class="line">&#125;</span><br><span class="line">fn();<span class="comment">//函数表达式必须先声明，再调用</span></span><br></pre></td></tr></table></figure>
<a id="more"></a>

<h3 id="构造函数Function"><a href="#构造函数Function" class="headerlink" title="构造函数Function"></a>构造函数Function</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//函数也是对象，可以使用Function构造函数new出来</span></span><br><span class="line"><span class="comment">//相当于var fn = function()&#123;&#125;</span></span><br><span class="line"><span class="keyword">var</span> fn = <span class="keyword">new</span> <span class="built_in">Function</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">//语法：new Function(arg1,arg2,arg3..,body);</span></span><br><span class="line"><span class="comment">// 1. 所有的参数都是字符串类型。</span></span><br><span class="line"><span class="comment">// 2. 前面可以定义任意多个形参，最后一个参数是代码体。</span></span><br><span class="line"><span class="keyword">var</span> fn = <span class="keyword">new</span> <span class="built_in">Function</span>(<span class="string">"alert(1111)"</span>);</span><br><span class="line">fn();</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> fn1 = <span class="keyword">new</span> <span class="built_in">Function</span>(<span class="string">"a1"</span>, <span class="string">"a2"</span>, <span class="string">"alert(a1+a2)"</span>);</span><br><span class="line">fn1(<span class="number">1</span>,<span class="number">2</span>);</span><br></pre></td></tr></table></figure>



<h2 id="函数也是对象"><a href="#函数也是对象" class="headerlink" title="函数也是对象"></a>函数也是对象</h2><blockquote>
<p>函数是由new Function创建出来的，因此函数也是一个对象， <code>所有的函数都是new Function的实例</code>。</p>
</blockquote>
<h3 id="函数的原型链结构"><a href="#函数的原型链结构" class="headerlink" title="函数的原型链结构"></a>函数的原型链结构</h3><p>画出下列代码的原型链结构</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//var Person = new Function();</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src="/blog/2017/04/03/javaScript/%E5%87%BD%E6%95%B0/function.jpg" alt></p>
<h3 id="Function-prototype常用成员"><a href="#Function-prototype常用成员" class="headerlink" title="Function.prototype常用成员"></a>Function.prototype常用成员</h3><ul>
<li>call：调用函数，重新指向this</li>
<li>apply：调用函数，重新指向this</li>
<li>bind：重新指向this，返回一个新的函数，不调用。</li>
</ul>
<h3 id="完整版原型链"><a href="#完整版原型链" class="headerlink" title="完整版原型链"></a>完整版原型链</h3><blockquote>
<p>绘制完整版原型链的目的是辅助大家理解js中对象的继承关系。</p>
</blockquote>
<p><img src="/blog/2017/04/03/javaScript/%E5%87%BD%E6%95%B0/full.png" alt></p>
<p>总结：</p>
<ol>
<li>所有函数都是new Function创建出来的，因此<code>所有函数.__proto__</code>都是<code>Function.prototype</code></li>
<li>所有对象都是new Object创建出来的，因此<code>所有对象.__proto__</code>都是<code>Object.prototyp</code></li>
</ol>
<p>测试1：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">Function.prototype &#x3D;&#x3D;&#x3D; Function.prototype   true</span><br><span class="line">Object.__proto__ &#x3D;&#x3D;&#x3D; Function.prototype       true</span><br><span class="line">Function.prototype.__proto__ &#x3D;&#x3D;&#x3D; Object.prototype  true</span><br><span class="line">Object.prototype.__proto__ &#x3D;&#x3D;&#x3D; Object.prototype    false</span><br><span class="line">Object.__proto__.__proto__ &#x3D;&#x3D;&#x3D; Object.prototype    true</span><br></pre></td></tr></table></figure>

<p>测试2：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">function Person() &#123;&#125;</span><br><span class="line">var p &#x3D; new Person()</span><br><span class="line"></span><br><span class="line">console.log(p.constructor)</span><br><span class="line">console.log(Person.constructor)</span><br></pre></td></tr></table></figure>

<h2 id="作用域"><a href="#作用域" class="headerlink" title="作用域"></a>作用域</h2><blockquote>
<p>作用域：变量起作用的区域，也就是说：变量定义后，可以在哪个范围内使用该变量。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">11</span>;<span class="comment">//全局变量</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> num1 = <span class="number">22</span>;<span class="comment">//局部变量</span></span><br><span class="line">  <span class="built_in">console</span>.log(num);  <span class="comment">// 全局变量在任何地方都能访问到</span></span><br><span class="line">  <span class="built_in">console</span>.log(num1);  </span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(num);</span><br></pre></td></tr></table></figure>

<p>在js里只有全局作用域和函数作用域。</p>
<p>函数作用域是在函数定义的时候作用域就确定下来了，和函数在哪调用无关。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num = <span class="number">123</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f1</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(num);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f2</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> num = <span class="number">456</span>;</span><br><span class="line">  f1();</span><br><span class="line">&#125;</span><br><span class="line">f2();<span class="comment">//打印啥？</span></span><br></pre></td></tr></table></figure>

<h3 id="作用域链"><a href="#作用域链" class="headerlink" title="作用域链"></a>作用域链</h3><blockquote>
<p>作用域链：只要是函数，就会形成一个作用域，如果这个函数被嵌套在其他函数中，那么外部函数也有自己的作用域，这个一直往上到全局环境，就形成了一个作用域链。</p>
</blockquote>
<p><code>变量的搜索原则</code>：</p>
<ol>
<li>从当前作用域开始查找是否声明了该变量，如果存在，那么就直接返回这个变量的值。</li>
<li>如果不存在，就会往上一层作用域查询，如果存在，就返回。</li>
<li>如果不存在，一直查询到全局作用域，如果存在，就返回。如果在全局中也没有找到该变量会报错</li>
</ol>
<h3 id="作用域链练习"><a href="#作用域链练习" class="headerlink" title="作用域链练习"></a>作用域链练习</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1 </span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line">fn1();</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn1</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(num);  <span class="comment">// ?</span></span><br><span class="line">  <span class="keyword">var</span> num = <span class="number">20</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(num);  <span class="comment">// ?</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(num);    <span class="comment">// ?</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2 -- 改造上面的面试题</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">10</span>;</span><br><span class="line">fn1();</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn1</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(num);  <span class="comment">// ?</span></span><br><span class="line">  num = <span class="number">20</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(num);  <span class="comment">// ?</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(num);    <span class="comment">// ?</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 3</span></span><br><span class="line"><span class="keyword">var</span> num = <span class="number">123</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f1</span>(<span class="params">num</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(num) <span class="comment">// ?</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f2</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> num = <span class="number">456</span></span><br><span class="line">    f1(num)</span><br><span class="line">&#125;</span><br><span class="line">f2()</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 4</span></span><br><span class="line"><span class="keyword">var</span> num1 = <span class="number">10</span>;</span><br><span class="line"><span class="keyword">var</span> num2 = <span class="number">20</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">num1</span>) </span>&#123;</span><br><span class="line">  num1 = <span class="number">100</span>;</span><br><span class="line">  num2 = <span class="number">200</span>;</span><br><span class="line">  num3 = <span class="number">300</span>;</span><br><span class="line">  <span class="built_in">console</span>.log(num1);</span><br><span class="line">  <span class="built_in">console</span>.log(num2);</span><br><span class="line">  <span class="built_in">console</span>.log(num3);</span><br><span class="line">  <span class="keyword">var</span> num3;</span><br><span class="line">&#125;</span><br><span class="line">fn();</span><br><span class="line"><span class="built_in">console</span>.log(num1);</span><br><span class="line"><span class="built_in">console</span>.log(num2);</span><br><span class="line"><span class="built_in">console</span>.log(num3);</span><br></pre></td></tr></table></figure>



<h2 id="函数的四种调用模式"><a href="#函数的四种调用模式" class="headerlink" title="函数的四种调用模式"></a>函数的四种调用模式</h2><blockquote>
<p>根据函数内部this的指向不同，可以将函数的调用模式分成4种</p>
</blockquote>
<ol>
<li>函数调用模式</li>
<li>方法调用模式</li>
<li>构造函数调用模式</li>
<li>上下文调用模式（借用方法模式）</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">函数：当一个函数不是一个对象的属性时，我们称之为函数。</span><br><span class="line">方法：当一个函数被保存为对象的一个属性时，我们称之为方法。</span><br></pre></td></tr></table></figure>



<h3 id="函数调用模式"><a href="#函数调用模式" class="headerlink" title="函数调用模式"></a>函数调用模式</h3><p><font color="red">如果一个函数不是一个对象的属性时，就是被当做一个函数来进行调用的。此时this指向了window</font></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="keyword">this</span>);<span class="comment">//指向window</span></span><br><span class="line">&#125;</span><br><span class="line">fn();</span><br></pre></td></tr></table></figure>



<h3 id="方法调用模式"><a href="#方法调用模式" class="headerlink" title="方法调用模式"></a>方法调用模式</h3><p><font color="red">当一个函数被保存为对象的一个属性时，我们称之为一个方法。当一个方法被调用时，this被绑定到当前对象</font></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  sayHi:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>);<span class="comment">//在方法调用模式中，this指向调用当前方法的对象。</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">obj.sayHi();</span><br></pre></td></tr></table></figure>



<h3 id="构造函数调用模式"><a href="#构造函数调用模式" class="headerlink" title="构造函数调用模式"></a>构造函数调用模式</h3><p><font color="red">如果函数是通过new关键字进行调用的，此时this被绑定到创建出来的新对象上。</font></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="keyword">this</span>);</span><br><span class="line">&#125;</span><br><span class="line">Person();<span class="comment">//this指向什么？</span></span><br><span class="line"><span class="keyword">var</span> p = <span class="keyword">new</span> Person();<span class="comment">//this指向什么？</span></span><br></pre></td></tr></table></figure>

<p><strong>总结：分析this的问题，主要就是区分函数的调用模式，看函数是怎么被调用的。</strong></p>
<ul>
<li>猜猜看：</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 分析思路：1. 看this是哪个函数的  2. 看这个函数是怎么调用的，处于什么调用模式</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 1</span></span><br><span class="line"><span class="keyword">var</span> age = <span class="number">38</span>;</span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    age: <span class="number">18</span>,</span><br><span class="line">    getAge: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="keyword">this</span>.age);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> f = obj.getAge;</span><br><span class="line">f();<span class="comment">//???</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2</span></span><br><span class="line"><span class="keyword">var</span> age = <span class="number">38</span>;</span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">  age:<span class="number">18</span>,</span><br><span class="line">  getAge:<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.age);<span class="comment">//???</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="keyword">this</span>.age);<span class="comment">//????</span></span><br><span class="line">    &#125;</span><br><span class="line">    foo();</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">obj.getAge();</span><br><span class="line">obj[<span class="string">"getAge"</span>]();</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 3</span></span><br><span class="line"><span class="keyword">var</span> length = <span class="number">10</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.length)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> obj = &#123;</span><br><span class="line">    length: <span class="number">5</span>,</span><br><span class="line">    method: <span class="function"><span class="keyword">function</span> (<span class="params">fn</span>) </span>&#123;</span><br><span class="line">        fn() </span><br><span class="line">        <span class="built_in">arguments</span>[<span class="number">0</span>]();</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">obj.method(fn, <span class="number">10</span>, <span class="number">5</span>);</span><br></pre></td></tr></table></figure>

<p>几种特殊的this指向</p>
<ul>
<li>定时器中的this指向了window，因为定时器的function最终是由window来调用的。</li>
<li>事件中的this指向的是当前的元素，在事件触发的时候，浏览器让当前元素调用了function</li>
</ul>
<h3 id="上下文调用模式"><a href="#上下文调用模式" class="headerlink" title="上下文调用模式"></a>上下文调用模式</h3><blockquote>
<p>上下文调用模式也叫方法借用模式，分为apply与call</p>
<p>使用方法： 函数.call() 或者 函数.apply()</p>
</blockquote>
<h4 id="call方法"><a href="#call方法" class="headerlink" title="call方法"></a>call方法</h4><p>call方法可以调用一个函数，并且可以指定这个函数的<code>this</code>指向</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//所有的函数都可以使用call进行调用</span></span><br><span class="line"><span class="comment">//参数1：指定函数的this，如果不传，则this指向window</span></span><br><span class="line"><span class="comment">//其余参数：和函数的参数列表一模一样。</span></span><br><span class="line"><span class="comment">//说白了，call方法也可以和()一样，进行函数调用，call方法的第一个参数可以指定函数内部的this指向。</span></span><br><span class="line">fn.call(thisArg, arg1, arg2, arg2);</span><br></pre></td></tr></table></figure>

<ul>
<li>借用对象的方法</li>
</ul>
<h4 id="伪数组与数组"><a href="#伪数组与数组" class="headerlink" title="伪数组与数组"></a>伪数组与数组</h4><blockquote>
<p>伪数组也叫类数组</p>
</blockquote>
<ol>
<li>伪数组其实就是一个对象，但是跟数组一样，伪数组也会有<code>length</code>属性，也有<code>0,1,2,3</code>等属性。</li>
<li>伪数组并没有数组的方法，不能使用<code>push/pop</code>等方法</li>
<li>伪数组可以跟数组一样进行遍历，通过下标操作。</li>
<li>常见的伪数组：<code>arguments</code>、<code>document.getElementsByTagName的返回值</code>、<code>jQuery对象</code></li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arrayLike = &#123;</span><br><span class="line">  <span class="number">0</span>:<span class="string">"张三"</span>,</span><br><span class="line">  <span class="number">1</span>:<span class="string">"李四"</span>,</span><br><span class="line">  <span class="number">2</span>:<span class="string">"王五"</span>,</span><br><span class="line">  length:<span class="number">3</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//伪数组可以和数组一样进行遍历</span></span><br></pre></td></tr></table></figure>

<ul>
<li>伪数组借用数组的方法</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.push.call(arrLike, <span class="string">"赵六"</span>);</span><br></pre></td></tr></table></figure>



<h4 id="apply方法"><a href="#apply方法" class="headerlink" title="apply方法"></a>apply方法</h4><p><code>apply()</code>方法的作用和 <code>call()</code>方法类似，只有一个区别，就是<code>apply()</code>方法接受的是<strong>一个包含多个参数的数组</strong>。而<code>call()</code>方法接受的是<strong>若干个参数的列表</strong></p>
<p>call和apply的使用场景：</p>
<ul>
<li>如果参数比较少，使用call会更加简洁</li>
<li>如果参数存放在数组中，此时需要使用apply</li>
</ul>
<p>课后练习：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 求数组的最大值和最小值</span><br></pre></td></tr></table></figure>



<h4 id="bind方法"><a href="#bind方法" class="headerlink" title="bind方法"></a>bind方法</h4><p><strong>bind()</strong>方法创建一个新的函数, 可以绑定新的函数的<code>this</code>指向</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 返回值：新的函数</span></span><br><span class="line"><span class="comment">// 参数：新函数的this指向，当绑定了新函数的this指向后，无论使用何种调用模式，this都不会改变。</span></span><br><span class="line"><span class="keyword">var</span> newFn = fn.bind(<span class="built_in">window</span>);</span><br></pre></td></tr></table></figure>



<h2 id="递归函数"><a href="#递归函数" class="headerlink" title="递归函数"></a>递归函数</h2><blockquote>
<p>递归函数：函数内部直接或者间接的调用自己</p>
</blockquote>
<p>递归的要求：</p>
<ol>
<li>自己调用自己（直接或者间接）</li>
<li>要有结束条件（出口）</li>
</ol>
<p>递归函数主要是<code>化归思想</code> ,将一个复杂的问题简单化，主要用于解决数学中的一些问题居多。</p>
<ul>
<li>把要解决的问题，归结为已经解决的问题上。</li>
<li>一定要考虑什么时候结束让函数结束，也就是停止递归（一定要有已知条件）</li>
</ul>
<p>练习：</p>
<ul>
<li>计算1-100之间所有数的和</li>
<li>深拷贝和浅拷贝</li>
</ul>

    </div>

    
    
    

      <footer class="post-footer">
          <div class="post-tags">
              <a href="/blog/tags/js%E6%A0%B8%E5%BF%83/" rel="tag"># js核心</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/blog/2017/03/20/javaScript/%E6%AD%A3%E5%88%99%E5%9F%BA%E7%A1%80%E5%92%8CJQuery%E5%B0%81%E8%A3%85/" rel="prev" title="正则和jq封装">
      <i class="fa fa-chevron-left"></i> 正则和jq封装
    </a></div>
      <div class="post-nav-item">
    <a href="/blog/2017/05/05/JQuery/JQuery/" rel="next" title="JQuery基础">
      JQuery基础 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#函数"><span class="nav-text">函数</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#定义函数的三种方式"><span class="nav-text">定义函数的三种方式</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#函数声明"><span class="nav-text">函数声明</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#函数表达式"><span class="nav-text">函数表达式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#构造函数Function"><span class="nav-text">构造函数Function</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#函数也是对象"><span class="nav-text">函数也是对象</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#函数的原型链结构"><span class="nav-text">函数的原型链结构</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Function-prototype常用成员"><span class="nav-text">Function.prototype常用成员</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#完整版原型链"><span class="nav-text">完整版原型链</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#作用域"><span class="nav-text">作用域</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#作用域链"><span class="nav-text">作用域链</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#作用域链练习"><span class="nav-text">作用域链练习</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#函数的四种调用模式"><span class="nav-text">函数的四种调用模式</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#函数调用模式"><span class="nav-text">函数调用模式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#方法调用模式"><span class="nav-text">方法调用模式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#构造函数调用模式"><span class="nav-text">构造函数调用模式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#上下文调用模式"><span class="nav-text">上下文调用模式</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#call方法"><span class="nav-text">call方法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#伪数组与数组"><span class="nav-text">伪数组与数组</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#apply方法"><span class="nav-text">apply方法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#bind方法"><span class="nav-text">bind方法</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#递归函数"><span class="nav-text">递归函数</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="大春哥"
      src="/blog/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">大春哥</p>
  <div class="site-description" itemprop="description">IT</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/blog/archives/">
        
          <span class="site-state-item-count">35</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/blog/categories/">
          
        <span class="site-state-item-count">11</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/blog/tags/">
          
        <span class="site-state-item-count">17</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">大春哥</span>
</div>

        








      </div>
    </footer>
  </div>

  
  <script src="/blog/lib/anime.min.js"></script>
  <script src="/blog/lib/velocity/velocity.min.js"></script>
  <script src="/blog/lib/velocity/velocity.ui.min.js"></script>

<script src="/blog/js/utils.js"></script>

<script src="/blog/js/motion.js"></script>


<script src="/blog/js/schemes/pisces.js"></script>


<script src="/blog/js/next-boot.js"></script>




  




  
<script src="/blog/js/local-search.js"></script>













  

  

</body>
</html>
